<template>
  <div>
    <el-input
      style="margin-left: 10px; width: 230px"
      placeholder="组织名称..."
      v-model="filterText"
      prefix-icon="el-icon-search"
      size="small"
    ></el-input>
    <el-tree
      style="margin-left: 10px; width: 280px;height: 100%;"
      class="filter-tree"
      :data="department"
      :props="defaultProps"
      :filter-node-method="filterNode"
      ref="tree"
      show-checkbox
      default-expand-all="true"
      @check="handleCheckChange"
    >
    </el-tree>
  </div>
</template>

<script>
export default {
  props: ["department"],

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  data() {
    return {
      filterText: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },

  methods: {
    handleCheckChange() {
      let selectobj = this.$refs.tree.getCheckedNodes();
      this.$emit("handleCheckChange", selectobj);
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>